﻿@{

}
@model FDSimpleModelGenerator.ViewComponents.User

<style>
    .dialog-upload {
        width: 560px;
        height: 420px;
        margin: 0 auto;
        border-radius: 8px;
        /*text-align: center;*/
        background: #ffffff;
        z-index: 1000;
        top: 180px;
        left: 50%;
        position: fixed;
        margin-left: -260px;
        display: none;
    }

    .dialog-upload-mask {
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        filter: alpha(opacity=60);
        opacity: 0.6;
        overflow: hidden;
        background-color: #000;
        display: none;
    }

    .dialog-upload .title {
        margin-left: 10px;
        text-align: center;
    }
</style>
<div class="dialog-upload-mask"></div>
<div class="card dialog-upload">
    <div class="card-header">
        <button type="button" class="close" aria-label="关闭">
            <span aria-hidden="true">&times;</span>
        </button>
        <div class="card-title upload-dialog-title">上传</div>
    </div>
    <div class="card-body">
        <form name="formUpload" action="Upload?handler=Server" method="post">
            <div class="alert alert-danger alert-dismissible d-none"></div>
            <div class="alert alert-info alert-dismissible d-none"></div>
            <div class="row mr-3">
                <label class="col-md-3 text-lg-right">文件名</label>
                <input class="col-md-9" name="Name" value="@Model.Name"  placeholder="输入模板名称"/>
            </div>
            <div class="row mt-3 mr-3">
                <label class="col-md-3 text-lg-right">选择文件</label>
                <input class="col-md-9" multiple="multiple" type="file" name="FileNames" />
            </div>
            <div class="row mt-3 mr-3">
                <label class="col-md-3 text-lg-right">模板描述</label>
                <textarea class="col-md-9" multiple name="Description" value="" placeholder="输入介绍该模板用途" rows="5" style="resize:none;"></textarea>                
            </div>
            <div class="row">
                <button type="button" id="btnUploadOk" class="offset-8 col-md-3 btn btn-success bg-primary mt-3">ok</button>
            </div>
        </form>
    </div>
</div>

<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
    // 请求前先设置好antitoken
    //$.ajaxSetup({
    //    beforeSend: function (xhr) {
    //        xhr.setRequestHeader("RequestVerificationToken",
    //            $('input:hidden[name="__RequestVerificationToken"]').val());
    //        console.log(xhr)
    //        //xhr.setRequestHeader("Content-Type", "application/json");
    //    }
    //});

    var uploadCallback,orgHeight;
    $("#btnUploadOk").on("click", e => {
        upload(res => {
            closeDialog();
            if (uploadCallback) {
                uploadCallback();
            }
        });
    });

    $(".close").click(e => {
        closeDialog();
    });

    function closeDialog() {        
        $(".dialog-upload").fadeOut();
        $(".dialog-upload-mask").hide();
    }

    // 上传
    function upload(succCallback) {
        var form = $("form[name=formUpload]");
        var url = form.attr("action");
        var data = $.serializeForm("form[name=formUpload]");
        console.log(data);
        isFileRequest = true;
        $.ajax({
            url: url,
            data: data,
            type: "POST",
            processData: false,
            contentType: false,
            cache: false,
            success: res => {
                if (res.code === 0 || res.code === "Success") {
                    //$(".alert-info").text(res.message);
                    showMsg('.alert-info', res.message);
                    setTimeout(() => {
                        if (succCallback !== undefined) {
                            succCallback(res);
                        }
                    }, 3000); // 3秒后关闭
                } else {
                    //$(".alert-danger").text(res.message);
                    showMsg('.alert-danger', res.message);
                }
                console.log(res);
            }
        });
    }

    function showMsg(selector, msg) {
        var ctr = $(selector);
        ctr.siblings(".alert").addClass("d-none");
        ctr.text(msg);
        console.log(ctr)
        ctr.removeClass("d-none");
        var dlg = $(".dialog-upload");
        dlg.height(orgHeight + ctr.height());
    }

    // 弹出框
    function showUpload(title, uploadcallback) {
        if (title) {
            $(".dialog-upload .upload-dialog-title").text(title);
        }
        uploadCallback = uploadcallback;
        $(".dialog-upload-mask").show();
        $(".dialog-upload").fadeIn();
        orgHeight = $(".dialog-upload").height();
    }
</script>